<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="胡爱静">
    <title></title>
    <style>
        .box {
            /* width: 100px;  */
            margin: 0 auto;
            font-size: 18px;
            display: flex;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            position: relative;
        }

        li {
            width: 20px;
            height: 20px;
            background-image: url(star.png);
        }

        ul li.active {
            background-position: 0 -28px;
        }

        .pingjia {
            width: 200px;
            position: absolute;
            border: 1px solid red;
            top: 20px;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>宝贝评价：</span>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <div class="pingjia">五星好评</div>
        </ul>
        <span class="result"></span>
    </div>
    <script src="jquery.js"></script>
</body>

</html>
<script>
   
    
    var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];
    $('li').each(function (index) {
        $(this).hover(function () {
            showStar(index + 1);
            // 展示内容
            var amsg = msg[$(this).index()];
            var html = '<strong style="color:red;">' + ($(this).index() + 1) + '分 ' +
                amsg.split('|')[0] + '</strong><br>' + amsg.split('|')[1];
            $('.pingjia').html(html);
            // $('.pingjia').html('<strong style="color:red;">' + ($(this).index() + 1) + '分 ' +
                // amsg.split('|')[0] + '</strong><br>' + amsg.split('|')[1]);
            var left  = $(this).position().left;
            $('.pingjia').css('left',left);
        }, function () {
            showStar(score);
        });
        var score=0;
        $(this).click(function () {
            //记录点击了第几个
            score = $(this).index() + 1;    //score = index + 1;
            $('.result').html('<strong style="color:red;">' + score + '分 </strong>' +
                msg[$(this).index()].split('|')[1]);
        });
    });
     var count;
    function showStar(count) {
        $('li').each(function (index) {
            // if(index < count)
            // {
            //  $(this).addClass('active');
            // }else{
            //   $(this).removeClass('active'); 
            // }  
            this.className = index < count ? 'active' : '';
        });



    }

</script>